<template>
	<view class="body">
		<view class="caraddTop">
			<view></view>
			<view class="rights" @click="complete">完成</view>
		</view><strong></strong>
		<view class="keyboard">
			<view class="board" v-if="tabtap">
				<view class="boards" @click="selectProvinceselectABC(item)" v-for="(item, index) in list" :key="index">{{ item }}</view>
				<view class="boards" @click="selectProvinceselectABC(item)" v-for="(item, index) in list1" :key="index">{{ item }}</view>
				<view class="boards" @click="selectProvinceselectABC(item)" v-for="(item, index) in list2" :key="index">{{ item }}</view>
				<view class="boa" @click="ABCtap">ABC</view>
				<view class="boards" @click="selectProvinceselectABC(item)" v-for="(item, index) in list3" :key="index">{{ item }}</view>
				<view class="boa" @click='del'>-</view>
			</view>
			<view class="board" v-else>
				<view class="boards" @click="selectABC(item)" v-for="(item, index) in list4" :key="index">{{ item }}</view>
				<view class="boards" @click="selectABC(item)" v-for="(item, index) in list5" :key="index">{{ item }}</view>
				<view class="boards" @click="selectABC(item)" v-for="(item, index) in list6" :key="index">{{ item }}</view>
				<view class="boa" @click="toabr">省份</view>
				<view class="boards" @click="selectABC(item)" v-for="(item, index) in list7" :key="index">{{ item }}</view>
				<view class="boa" @click='del'>-</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	// props:{
	// 	tabtap{
	// 		type:Boolean,
	// 		default:true
	// 	}
	// },
	data() {
		return {
			carNo: '',
			tabtap: true,
			list: ['京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘'],
			list1: ['皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘', '晋'],
			list2: ['蒙', '陕', '吉', '闽', '贵', '粤', '青', '藏', '川', '宁'],
			list3: ['琼', '使', '领', '警', '学', '港', '澳'],

			list4: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
			list5: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
			list6: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
			list7: ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
		};
	},
	methods: {
		del(){
			 this.$emit("del")
		},
		selectABC(item) {
			if (this.carNo.length < 8) {
				this.carNo += item;
			}
			this.$emit('getCarNo', this.carNo);
		},
		selectProvinceselectABC(item) {
			// console.log(item)
			this.carNo = item;
			this.tabtap = false;
			this.$emit('getCarNo', this.carNo);
		},
		toabr() {
			this.tabtap = true;
		},
		ABCtap() {
			this.tabtap = false;
		},
		complete() { 
			if (this.carNo.length < 7) {
				console.log('请选择正确的车牌号');
			} else {
				this.$emit('close');
			}
		}
	}
};
</script>

<style lang="less">
.body {
	position: absolute;
	bottom: 0;
}
.caraddTop {
	border-top: 1rpx solid #dcdfe6;
	width: 100%;
	height: 85rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.rights {
		margin-right: 32rpx;
	}
}
.board {
	background-color: #e7e8e9;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding-bottom: 75rpx;
}
.boards {
	width: 65rpx;
	height: 85rpx;
	line-height: 85rpx;
	text-align: center;
	background-color: #fff;
	border-radius: 10rpx;
	margin: 10rpx 5rpx 0rpx;
}
.boa {
	width: 80rpx;
	height: 85rpx;
	line-height: 85rpx;
	text-align: center;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 0 11rpx;
	margin: 9rpx 5rpx 0rpx;
	background-color: #cfd0d2;
}
</style>
